/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - http://cssreset.com */
html {
	color: #000;
	background: #FFF
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

fieldset, img {
	border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal
}

ol, ul {
	list-style: none
}

caption, th {
	text-align: left
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal
}

q:before, q:after {
	content: ''
}

abbr, acronym {
	border: 0;
	font-variant: normal
}

sup {
	vertical-align: text-top
}

sub {
	vertical-align: text-bottom
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit
}

input, textarea, select {
	*font-size: 100%
}

legend {
	color: #000
}

#yui3-css-stamp.cssreset {
	display: none
}

@import "mixins";
@sprite_image: "../src/bg.png";
@logo_image: "../src/logo.png";
@highlight_color: #ff5113;
@image_base_url: "http://www.100msm.com/assets/images";
// @image_base_url: "http://42.121.52.125/assets/images";
// @image_base_url: ".";
@color_purple_red: #d5253e;
@color_price: #fefefe;
body {
	font-size: 12px;
	line-height: 1.5;
	color: #404040;
	background-color: #fff;

	a {
		color: #404040;
		font-size: 12px;
		line-height: 1.5;
		text-decoration: none;

		&:hover {
			text-decoration: none;
		}
	}
}

.block {
	text-align: center;

	.block-wrapper {
		text-align: left;
		margin: 0 auto;
		width: 960px;
		overflow: hidden;

		.block-main {
			width: 742px;
			float: left;
			overflow: hidden;
		}

		.block-sub {
			float: right;
			width: 200px;
			overflow: hidden;
		}
	}
}

#page-header {
	.block {
		@height: 55px;
		background-color: #000;
		height: @height; // 阴影
		h1 {
			@width: 170px;
			float: left;
			width: @width;
			height: @height;

			a {
				width: 100%;
				height: 100%;
				display: block;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		h2 {
			position: absolute;
			right: 218px;
			top: 0;
			font-size: 12px;
			line-height: @height;
			color: #ccc;
		}
	}
}

#page-body {
	#vote {
		background: url("@{image_base_url}/bg_vote.png") 0 0 repeat #fff;
		border-bottom: 1px solid #efefef;
		zoom: 1;

		.block-wrapper {
			padding-bottom: 15px;
		}

		.block-main {
			position: relative;
			#vote-tags {
				padding-top: 21px;
				height: 38px;
				clear: both;

				ul {
					li {
						float: left;
						margin-right: 15px;
						a {
							display: block;
							padding: 0 3px;
							line-height: 18px;
							color: #000;
							&:hover {
								text-decoration: underline;
							}
						}

						&.active {
							a {
								background-color: #000;
								color: #fff;
								&:hover {
									text-decoration: none;
								}
							}
						}
					}
				}
			}

			#candidate1 {
				float: left;
			}

			#candidate2 {
				float: right;
			}

			.item {
				@width: 367px;
				@height: 537px;
				@title_line_height: 28px;
				overflow: hidden;
				width: @width - 4px;
				height: @height - 4px;
				position: relative;
				border: 2px solid #ccc;
				background-color: #fff;
				cursor: pointer;

				.item-title {
					color: #5a5a5a;
					height: 64px;
					padding: 0 26px 0 27px;
					display: table;
					*display: block;
					table-layout: fixed;
					position: static;
					*position: relative;

					.item-title-wrapper {
						display: table-cell;
						*display: block;
						vertical-align: middle;
						font-weight: bold;
						color: #5a5a5a;
						position: static;
						*position: absolute;
						*top: 50%;

						p {
							position: static;
							*position: relative;
							*top: -50%;
						}
					}
				}

				.item-description {
					height: 62px;
					padding: 12px 26px 0 27px;
					overflow: hidden;

					p {
						border-top: 1px dotted #d2d2d2;
						heihgt: 60px;
						overflow: hidden;
						color: #888;
					}
				}

				.item-pic {
					@width: 310px;
					@height: 310px;
					padding: 14px 26px 14px 27px;
					width: @width;
					height: @height;
					background: url("@{image_base_url}/bg_vote.png") 0 0 repeat #fff;
					overflow: hidden;
					position: relative;

					.item-price-mask {
						position: absolute;
						bottom: 5px;
						left: 0;
						width: 100%;
						height: 33px;
						background-color: #000;
						.opacity-50();
					}

					.item-price {
						position: absolute;
						left: 0;
						bottom: 5px;
						width: 100%;
						text-align: center;
						color: @color_price;
						line-height: 33px;
						height: 33px;
						.price-unit {
							font-size: 12px;
							vertical-align: middle;
							margin-right: 4px;
							.price_symbol();
						}
						.price-figure {
							font-size: 22px;
							vertical-align: middle;
							.price_figure();
						}
					}
				}

				.item-act {
					margin-top: 7px;
					text-align: center;

					.btn-vote {
						margin: 0 auto;
						@btn_height: 33px;
						.btn1(153px, @btn_height, #ea929e, #fff);

					}
				}

				.btn-buy,
				.btn-collect {
					position: absolute;
					top: 157px;
					height: 45px;
					width: 45px;
					text-align: center;
					color: #fff;
					text-decoration: underline;
					display: none;
					background: 0 0 repeat transparent;
					text-indent: -9999px;

					&:hover {
						text-decoration: none;
					}
				}

				.btn-collect {
					left: 33px;
					background-image: url("@{image_base_url}/vote_collect.png");
				}

				.btn-buy {
					right: 31px;
					background-image: url("@{image_base_url}/vote_buy_png24.png");
					_background-image: url("@{image_base_url}/vote_buy_png8.png");
				}
			}

		// .item
			.active {
				border-color: @color_purple_red;
				.item-act {
					.btn-vote {
						background-color: @color_purple_red;
					}
				}
			// .btn-collect,
				.btn-buy {
					display: block;
				}
			}

			#pk {
				background: url("@{image_base_url}/vs.png") 0 0 no-repeat transparent;
				position: absolute;
				width: 100px;
				height: 100px;
				top: 243px;
				left: 327px;
			}

			#skip {
				background-color: #7f7f7f;
				color: #fff;
				width: 97px;
				line-height: 33px;
				text-align: center;
				display: block;
				position: absolute;
				bottom: 18px;
				left: 327px;
			}
		}

		.block-sub {
			position: relative;
			width: 200px;
			padding-top: 59px;

			#weiboxiu {
				border: 1px solid #ccc;
				height: 535px;
				color: #626262;
				background-color: #fff;
			}
		}
	}

}

#lastest-tops {
	padding: 25px 0 102px;
	.block-main {
		#top-1 {
			position: relative;
			overflow: hidden;
			padding-top: 24px;
			margin-bottom: 10px;
			.item {
				border: 2px solid #ccc;
				overflow: hidden;
				padding: 37px 16px 0 19px;
				height: 308px;
				background: url("@{image_base_url}/bg_vote.png") 0 0 repeat transparent;
				position: relative;

				.item-left {
					overflow: hidden;
					width: 250px;
					height: 250px;
					float: left;
					position: relative;

					.item-pic {
						@width: 250px;
						@height: 250px;
						padding: 0;
						width: @width;
						height: @height;
						background: url("@{image_base_url}/bg_vote.png") 0 0 repeat #fff;
						overflow: hidden;
					}
					.item-price-mask {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 250px;
						height: 33px;
						background-color: #000;
						.opacity-80();
					}

					.item-price {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 250px;
						text-align: center;
						color: @color_price;
						line-height: 33px;
						height: 33px;
						.price-unit {
							font-size: 12px;
							vertical-align: middle;
							margin-right: 4px;
							.price_symbol();
						}
						.price-figure {
							font-size: 22px;
							vertical-align: middle;
							.price_figure();
						}
					}
				}

				.item-right {
					float: right;
					width: 434px;
					.item-detail {
						width: 415px;
						background-color: #fff;
						padding: 0 19px 0 6px;

						.item-title {
							font-size: 14px;
							.font_family_yahei();
							line-height: 29px;
							height: 29px;
							overflow: hidden;
							border-bottom: 1px dotted #d2d2d2;
							margin-bottom: 15px;
							color: #404040;
						}

						.item-description {
							height: 166px;
							border-bottom: 1px dotted #d2d2d2;
							font-size: 12px;
							line-height: 22px;
							color: #5a5a5a;
							font-weight: bold;
							margin-bottom: 6px;
						}

						.item-stats {
							line-height: 32px;
							color: #9e9e9e;

							em {
								color: @color_purple_red;
							}
						}
					}

					.item-operation {
						@btn_height: 25px;
						margin-top: 10px;
						overflow: hidden;
						.btn-link {
							.btn1(100px, @btn_height,@color_purple_red, #fff);
							float: right;
							margin-right: 25px;
						}
					}
				}

			}

			.item-tag {
				position: absolute;
				left: 245px;
				top: 0;
				width: 255px;
				height: 41px;
				overflow: hidden;
				line-height: 32px;
				background: url("@{image_base_url}/tag1.png") 0 0 no-repeat no-repeat transparent;
				color: #fff;
				text-align: center;
				font-size: 16px;
				.font_family_yahei();

				.date {
					font-size: 14px;
				}
			}
			.item-ranking {
				position: absolute;
				top: 24px;
				right: 8px;
				width: 30px;
				height: 53px;
				overflow: hidden;
				background: url("@{image_base_url}/top.png") 0 0 no-repeat transparent;
				span {
					text-align: center;
					line-height: 56px;
					width: 100%;
					display: block;
					font-size: 20px;
					font-style: italic;
					color: #fff;
					font-weight: bold;
					.font_family_yahei();
				}
			}

		}
		#top-list {
			padding: 11px 0 13px;
			border: 2px solid #ccc;
			text-align: center;

			#top-list-wrapper {
				width: 712px;
				margin: 0 auto;
				overflow: hidden;
				text-align: left;

				ul {
					overflow: hidden;
					width: 723px;
					height: 838px;

					li {
						float: left;
						margin: 0 11px 11px 0;

						.item {
							background: url("@{image_base_url}/bg_vote.png") 0 0 repeat transparent;
							position: relative;

							.item-pic {
								@width: 230px;
								@height: 230px;
								width: @width;
								height: @height;
								background: url("@{image_base_url}/bg_vote.png") 0 0 repeat #fff;
								overflow: hidden;
							}

							.item-title,
							.item-stats {
								color: #272727;
								.singleline_cutoff(165px);
								width: 230px;
								height: 42px;
								line-height: 42px;
								background-color: #7f7f7f;
								color: #fff;
								overflow: hidden;
							}

							.item-stats {
								.item-count {
									float: left;
									padding-left: 27px;
								}

								.item-price {
									float: right;
									padding-right: 27px;

									.price-unit {
										margin-right: 4px;
										.price_symbol();
									}
									.price-figure {
										.price_figure();
									}
								}
							}

							.item-title {
								text-indent: 16px;
								display: none;
							}

							.item-ranking {
								width: 30px;
								height: 30px;
								display: block;
								background: url("@{image_base_url}/toplist_ranking.png") 0 0 repeat transparent;
								position: absolute;
								left: 0;
								top: 0;
								color: #fff;
								line-height: 24px;
								text-indent: 5px;
							}
							.btn-buy {
								position: absolute;
								top: 95px;
								right: 25px;
								height: 45px;
								width: 45px;
								text-align: center;
								color: #fff;
								text-decoration: underline;
								display: none;
								background: 0 0 repeat transparent;
								text-indent: -9999px;
								background-image: url("@{image_base_url}/vote_buy_png24.png");
								_background-image: url("@{image_base_url}/vote_buy_png8.png");

								&:hover {
									text-decoration: none;
								}


							}
						}

						&.active {
							.btn-buy,
							.item-title {
								display: block;
							}

							.item-stats {
								display: none;
							}
						}
					}

				}

			}
		}

	}

	.block-sub {
		.box {
			position: relative;
			overflow: hidden;
			padding-top: 24px;

			.box-wrapper {
				border: 2px solid #ccc;
				overflow: hidden;
				text-align: center;
				padding: 41px 0 20px;

				ul {
					margin: 0 auto;
					text-align: left;
					width: 170px;

					li {
						position: relative;
						border-bottom: 1px dotted #d2d2d2;
						margin-bottom: 12px;

						.item {
							.item-pic {
								@width: 170px;
								@height: 170px;
								padding: 0;
								width: @width;
								height: @height;
								background: url("@{image_base_url}/bg_vote.png") 0 0 repeat #fff;
								overflow: hidden;
								margin-bottom: 5px;

								a {
									display: block;
									width: @width;
									height: @height;
								}

							}

							.item-title {
								color: #272727;
								margin-bottom: 2px;
								.singleline_cutoff(165px);
							}
							.item-count {
								color: #9e9e9e;
								margin-bottom: 6px;
							}
						}

					}
				}
			}

			.box-tag {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 41px;
				overflow: hidden;
				line-height: 32px;
				background: url("@{image_base_url}/tag2.png") center center no-repeat no-repeat transparent;
				color: #fff;
				text-align: center;
				font-size: 16px;
				.font_family_yahei();
			}
		}
	}
}

#page-footer {
	#weixin {
		.block-wrapper {
			#logo-sub {
				float: left;
				padding: 55px 0 0 5px;
			}
			#qrcode {
				float: right;
				padding: 27px 16px 0 0;
			}

			.block-sub {
				padding-top: 46px;
				p {
					padding-left: 14px;
					color: #888;
					line-height: 29px;
				}
			}
		}
		background-color: #eee;
		height: 155px;
	}

	#weibo {
		.block-wrapper {
			height: 82px;
			text-align: right;
			padding: 16px;

			#follow-sina,
			#qq {
				float: left;
			}

			#folow-sina {
				margin-right: 16px;
			}
		}
	}
}
